<template>
  <div :class="[...classes]" class="basic-text-outer" :style="style">
    <slot></slot>
  </div>
</template>

<script lang="ts">
import {computed, defineComponent, ref, watch} from 'vue'

export default defineComponent({
  name:'basic-text',
  props:{
    color: {
      type: String,
      default: 'white',
    },
    cursor:{
      type: [Boolean, String],
      default: 'false',
      validator(val) {
        if (val == null) return true;
        if (typeof val == "string") {
          return (['true', 'false'].indexOf(val) >= 0)
        } else return typeof val == 'boolean';
      }
    },
    style:{
      type:Object
    },
    underLine:{
      type: [Boolean, String],
      default: 'none',
      validator(val) {
        if (val == null) return true;
        if (typeof val == "string") {
          return (['true', 'false', 'auto','none'].indexOf(val) >= 0)
        } else return typeof val == 'boolean';
      }
    }
  },
  setup(props:any) {

    const underLine=ref(props.underLine);
    const style=ref(props.style);
    const cursor=ref(props.cursor);

    watch(()=>props.hovered,(nVal)=>{
      underLine.value=nVal
    })
    watch(()=>props.style,(nVal)=>{
      style.value=nVal
    })
    watch(()=>props.cursor,(nVal)=>{
      cursor.value=nVal
    })

    const classes = computed(()=>{
      let classes=[];
      if (underLine.value !== 'auto'&&underLine.value !== 'none') {
        if (typeof underLine.value == 'string') underLine.value = underLine.value === 'true';
        if (underLine.value)classes.push('basic-text-underline')
      } else {
        if(underLine.value==='auto'){
          classes.push('basic-text-underline-auto')
        }
      }

      if(typeof cursor.value=='string'){
        if(cursor.value=='true')classes.push('basic-text-cursor')
      }else {
        if(cursor.value)classes.push('basic-text-cursor')
      }

      return classes;
    })



    return {
      classes,
      style
    }
  }
})
</script>

<style lang="less" scoped>

.basic-text-outer{
  display: inline-block;
}

.basic-text-cursor{
  cursor:pointer;
}

.basic-text-underline{
  padding-bottom: 1px;
  border-bottom: #1677ff solid 1px;
}

.basic-text-underline-auto{
  padding-bottom: 1px;
  border-bottom: 1px;
}
.basic-text-underline-auto:hover{
  border-bottom: #1677ff solid 1px;
}

</style>
